<template>
  <div>
    <el-dialog
      title="新增一条待办"
      :visible.sync="newDialogVisible"
      width="60%"
    >
      <el-form
        label-position='left'
        label-width="150px"
        :model='dialogForm'
        :rules='rules'
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item
          label="编号/标题:"
          prop='title'
        >
          <el-input
            v-model="dialogForm.title"
            style="width:60%"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="事件定级:"
          prop="level"
        >
          <el-select
            v-model="dialogForm.level"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input
            type="textarea"
            style="width:60%"
            v-model="dialogForm.describe"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="截至日期">
          <el-date-picker
            v-model="dialogForm.deadline"
            value-format='yyyy-MM-dd'
            type="date"
            clearable
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-time-select
            v-model="dialogForm.time"
            clearable
            :picker-options="{
            start: '09:30',
            step: '00:15',
            end: '18:30'
          }"
            placeholder="选择时间"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item label="补充图片:">
          <el-upload
            action="#"
            class="upload-demo"
            multiple
            :limit="1"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="upload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div
              class="el-upload__tip"
              slot="tip"
            >只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 图片预览 -->
      <div class="image">
        <img
          v-for="(item,index) in imageList"
          :key='index'
          :src="item"
          alt="🈚"
        />
      </div>
      <el-button
        type='text'
        class="el-icon-service"
        @click='playMusic'
      >嘿！要不要听下这首歌?</el-button>
      <!-- footer -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="newDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fs from 'fs'
export default {
  data () {
    return {
      jsonStr: '',
      fileList: [],
      imageList: [],
      newDialogVisible: false,
      dialogForm: {
        title: '',
        level: '',
        deadline: '',
        describe: '',
        time: '',
        image: [],
        state: 'todo'
      },
      //歌单1.因为我喜欢你，我在人民广场吃着炸鸡，tiptoe,youngdown&broke,loststar,仅凭亲吻
      songSheet: [
        'https://i.y.qq.com/v8/playsong.html?songid=332395876#webchat_redirect',
        'https://i.y.qq.com/v8/playsong.html?songid=101805136#webchat_redirect',
        'https://i.y.qq.com/v8/playsong.html?songid=374691520#webchat_redirect',
        'https://y.qq.com/n/ryqq/songDetail/001mURoL0O1Vv2',
        'https://i.y.qq.com/v8/playsong.html?songid=234249356#webchat_redirect',
      ],
      options: [
        {
          value: 'p1',
          label: 'P1  重要 且紧迫'
        }, {
          value: 'p2',
          label: 'P2  重要 不紧迫'
        }, {
          value: 'p3',
          label: 'P3  不重要 紧迫'
        }, {
          value: 'p4',
          label: 'P4  不重要不紧迫'
        }
      ],
      rules: {
        level: [
          { required: true, message: '请选择事件等级' },
        ],
        title: [
          { required: true, message: '请输入事件标题' },
        ],
      }
    }
  },
  methods: {
    init (data) {
      this.newDialogVisible = true
      this.jsonStr = JSON.parse(data)
      this.$nextTick(() => this.$refs.ruleForm.clearValidate())
    },
    updateInit (item) {
      this.dialogForm.title = item.title
      this.dialogForm.level = item.level
      this.dialogForm.deadline = item.deadline
      this.dialogForm.describe = item.describe
      this.dialogForm.time = item.time
      this.dialogForm.image = item.image
      this.dialogForm.state = item.state
      this.newDialogVisible = true
      this.imageList = []
      this.imageList = item.image.length && item.image.map(item => {
        return 'data:image/png;base64' + item
      })
    },
    convertImgToBase64 (imageFile) {
      return new Promise(res => {
        let reader = new FileReader();
        reader.readAsDataURL(imageFile);
        reader.onload = function (e) {
          let base64Str = e.target.result;
          res(base64Str)
        };
      })
    },
    upload (file, fileList) {
      if (file.raw) {
        this.convertImgToBase64(fileList[0].raw).then(res => {
          this.dialogForm.image.push(res)
          this.fileList = []
          this.imageList = this.dialogForm.image.map(item => {
            return 'data:image/png;base64' + item
          })
        })
      }
    },
    save () {
      this.$refs.ruleForm.validate().then((valid) => {
        if (!valid) return
        // 提交表单
        this.jsonStr.todo.push(this.dialogForm)
        var data = fs.writeFileSync('./joe.json', JSON.stringify(this.jsonStr));
        this.newDialogVisible = false
        this.$parent.readFile()
      })

    },
    playMusic () {
      const shell = require('electron').shell
      const song = this.songSheet[Math.floor(Math.random() * (this.songSheet.length))]
      shell.openExternal(song)
    }
  }
}
</script>

<style lang='scss' scoped>
.image{
  width: 20%;
}
</style>